
<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import axios from 'axios';

const echartPie = ref(null);
let chartData = ref([]);  // 存储API数据

// 初始化饼图
function initializeChart() {
  const myChart = echarts.init(echartPie.value, "dark");

  // 处理数据，映射为饼图需要的格式
  const pieData = chartData.value.map(item => ({
    name: item.name,  // 类目名称
    value: item.value // 类目数量
  }));

  const option = {
    title: {
      text: '价格分布数量分析',  // 修改标题
      left: 'center',
      textStyle: {
        color: '#FFF',
        fontWeight: 'bold',
        fontSize: '20px'
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',  // 提示框格式化
    },
    legend: {
      orient: 'vertical',  // 修改为垂直排列
      left: 'left',        // 设置为左侧显示
      top: 'middle',       // 垂直居中显示
      textStyle: {
        color: '#FFFFFF',
        fontSize: '16px'
      },
      data: pieData.map(item => item.name),  // 使用类目名称作为图例项
    },
    series: [
      {
        name: '图书类目',
        type: 'pie',
        radius: '50%',
        data: pieData,
        itemStyle: {
          borderRadius: 5,  // 设置圆角
          borderColor: '#fff',
          borderWidth: 2
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  myChart.setOption(option);
}

// 请求接口数据
function fetchData() {
  axios.get('/book-api/queryAllAdsPriceDistributionCount')  // 修改为新的API路径
      .then(response => {
        chartData.value = response.data.data;  // 存储返回的数据
        initializeChart();  // 渲染图表
      })
      .catch(error => {
        console.error('数据获取失败:', error);
      });
}


onMounted(() => {
  fetchData();
});
</script>

<template>
  <div ref="echartPie" class="chart-container"></div>
</template>

<style scoped>
.chart-container {
  width: 100%;
  height: 460px;
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 8px;
  bottom: 1%;
}
</style>
